<template>
	<view class="bigbox">
		<view class="cur">
			<view class="none" :class="{active:num==0}" @tap="num=0">黄金列表</view>
			<view class="none" :class="{active:num==1}" @tap="num=1">黄金热门</view>
		</view>
		<swiper :current='num' style="height: 80vh;" >
			<swiper-item>
				<scroll-view scroll-y="true" lower-threshold="100"  style="height: 80vh;">
					<view class="midbox" v-for="item in godl" :key="item.id">
						<view class="smabox" >
							<view class="title">
								{{item.varietyName}}
								<text class="span">收益稳赚</text>
								<text class="span">{{item.code}}</text>
							</view>
							<view class="item">
								<view class="left">
									<view class="num">123%</view>
									<view class="gary">涨跌幅</view>
								</view>
								<view class="right">
									
								</view>
								<button type="default" @tap="taz(item.code)" class="btn">立即买入</button>
							</view>
						</view>
					</view>
					<view v-if="is" class="bottom">已加载全部</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" lower-threshold="100" style="height: 80vh;">
					<view class="midbox" v-for="item in godl" :key="item.id">
						<view class="smabox">
							<view class="title">
								{{item.varietyName}}
								<text class="span">收益稳赚</text>
								<text class="span">123123</text>
							</view>
							<view class="item">
								<view class="left">
									<view class="num">123123%</view>
									<view class="gary">涨跌幅</view>
								</view>
								<view class="right">
									
								</view>
								<button type="default" @tap="taz(item.code)"  class="btn">立即买入</button>
							</view>
						</view>
					</view>
					<view v-if="is" class="bottom">已加载全部</view>
				</scroll-view>
			</swiper-item>
		</swiper>



	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('gold');
	export default {
		data() {
			return {
				is: false,
				num: 0,
			};
		},
		onLoad() {
			this.getgold()
		},
		computed:{
			...mapState([`godl`])
		},
		methods: {
			...mapMutations([`sethj`]),
			...mapActions(['getgold']),
			taz(data){
				
				this.sethj(data)
				uni.navigateTo({
					url:'./gold'
				})
			}
			
		}
	};
</script>

<style scoped lang="scss">
	.bigbox {
		width: 750rpx;
		padding: 20rpx 40rpx;

		.banner {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;
			width: 670rpx;
			height: 132rpx;
			background-position: center;
			background-size: 116%;
			border-radius: 10rpx;
			padding: 24rpx;

			.title {
				font-size: 32rpx;
				color: #ffffff;
			}

			.text {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}

		.cur {
			margin-top: 20rpx;
			width: 670rpx;
			height: 100rpx;
			display: flex;

			.none {
				flex-grow: 1;
				line-height: 100rpx;
				text-align: center;
			}

			.active {
				border-bottom: 1rpx solid #3775f6;
			}
		}

		.midbox {
			width: 672rpx;
			height: 186rpx;
			margin-top: 68rpx;

			.smabox {
				.title {
					font-size: 28rpx;
					color: #2e3033;
					margin-bottom: 20rpx;
				}

				.span {
					font-size: 22rpx;
					color: #ee8e55;
					margin-left: 20rpx;
					background-color: #fef8f3;
				}
			}

			.item {
				display: flex;

				.left {
					flex-grow: 1;

					.num {
						font-size: 48rpx;
						color: #e74d45;
					}

					.gary {
						font-size: 24rpx;
						color: #bcc3cd;
					}
				}

				.right {
					flex-grow: 1;

					.item-info {
						height: 58rpx;
						line-height: 58rpx;
						font-size: 40rpx;
						color: #2e3033;

						.size {
							font-size: 24rpx;
						}
					}

					.gary {
						font-size: 24rpx;
						color: #bcc3cd;
					}
				}

				.btn {
					margin-top: 10rpx;
					height: 50rpx;
					background-color: #3a6af6;
					border-radius: 4rpx;
					font-size: 24rpx;
					line-height: 50rpx;
					color: #ffffff;
				}
			}
		}

		.bottom {
			width: 670rpx;
			text-align: center;
			font-size: 24rpx;
			color: #818181;
			margin-top: 70rpx;
		}
	}
</style>
